<template>
    <div class="body_code">
        <!-- <p class="error">{{ error }}</p> -->
        <!--错误信息-->
        <!-- <p class="decode-result">
            扫描结果:
            {{ result }}
            </p> -->
        <!--扫描结果-->

        <qrcode-stream @decode="onDecode" @init="onInit" style="height: 100vh;" :camera="camera">
            <div>
                <div class="qr-scanner">
                    <div class="box">
                        <div class="line"></div>
                        <div class="angle"></div>
                    </div>
                    <!-- <div class="close" @click.stop="closeCode">关闭</div> -->
                </div>
            </div>
        </qrcode-stream>
    </div>
</template>
 
<script>
// 下载插件

// 引入
import { QrcodeStream } from 'vue-qrcode-reader'
import { Toast, ImagePreview, Dialog, Cell, CellGroup } from 'vant'
export default {
    // 注册
    components: { QrcodeStream },
    props: {
        camera: {
            type: String,
            default: 'rear'
        },
        result: {
            type: String,
            default: ''
        },

    },
    data() {
        return {
            error: "",

        }
    },
    methods: {
        onDecode(result) {
            this.$emit('onDecode', result)
        },
        closeCode() {
            this.$emit('closeCode')
        },
        async onInit(promise) {
            try {
                await promise
            } catch (error) {
                if (error.name === 'NotAllowedError') {
                    this.error = 'ERROR: 您需要授予相机访问权限'
                } else if (error.name === 'NotFoundError') {
                    this.error = 'ERROR: 这个设备上没有摄像头'
                } else if (error.name === 'NotSupportedError') {
                    this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)'
                } else if (error.name === 'NotReadableError') {
                    this.error = 'ERROR: 相机被占用'
                } else if (error.name === 'OverconstrainedError') {
                    this.error = 'ERROR: 安装摄像头不合适'
                } else if (error.name === 'StreamApiNotSupportedError') {
                    this.error = 'ERROR: 此浏览器不支持流API'
                }else if(error.name === 'InsecureContextError'){
                    this.error = 'ERROR: 仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP'
                }
                if (this.camera != 'off') {
                    Dialog.alert({
                        title: '提示',
                        message: this.error,
                    }).then(() => {
                        this.closeCode()
                    });
                }
            }

        }
    }
}
</script>
 
<style scoped>
.error {
    font-weight: bold;
    color: red;
}
</style>
 
<style scoped>
.body_code {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.close {
    position: absolute;
    right: 30px;
    top: 50px;
    width: 50px;
    height: 30px;
    background: red;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;

}

.qr-scanner {
    /* background-image:
        linear-gradient(0deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent),
        linear-gradient(90deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent); */
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    width: 100%;
    /* height: 100%; */
    height: 100vh;
    position: relative;
    background-color: #111;

    /* background-color: #111; */
}

.qr-scanner .box {
    width: 213px;
    height: 213px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 0.1rem solid rgba(243, 23, 23, 0.2);
    /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
}

.qr-scanner .line {
    height: calc(100% - 2px);
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #ff0000 211%);
    border-bottom: 3px solid #ff0000;
    transform: translateY(-100%);
    animation: radar-beam 2s infinite alternate;
    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
    content: '';
    display: block;
    position: absolute;
    width: 3vw;
    height: 3vw;

    border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
    top: 0;
    border-top-color: #ff0000;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
    bottom: 0;
    border-bottom-color: #ff0000;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
    left: 0;
    border-left-color: #ff0000;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
    right: 0;
    border-right-color: #ff0000;
}

@keyframes radar-beam {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}
</style>